
import { MouseEventHandler, useEffect, useRef } from 'react'

function WebDistanceTest2() {
  const ref = useRef<HTMLDivElement>(null);

  const clickHandler: MouseEventHandler<HTMLDivElement> = (e) => {
    console.log(ref.current?.scrollTop)
  }


  return (
    <div>
    <div id="box" ref={ref} style={{
      marginTop: '800px',
      width: '100px',
      height: '100px',
      background: 'red',
      overflow: 'auto'
    }} onClick={clickHandler}>
      <p>xxxxx</p>
      <p>xxxxx</p>
      <p>xxxxx</p>
      <p>xxxxx</p>
      <p>xxxxx</p>
      <p>xxxxx</p>
      <p>xxxxx</p>
      <p>xxxxx</p>
      <p>xxxxx</p>
      <p>xxxxx</p>
      <p>xxxxx</p>
      <p>xxxxx</p>
      <p>xxxxx</p>
      <p>xxxxx</p>
      <p>xxxxx</p>
      <p>xxxxx</p>
    </div>
  </div>
  )
}

export default WebDistanceTest2
